var oli = Array.prototype.slice.call(document.getElementsByTagName('li'));

oli.forEach(function (ele, index) {
    ele.sp=getSpec(ele);
    ele.addEventListener('mouseenter', function (e) {
        addClass(this, e, 'in');
    })
    ele.addEventListener('mouseleave', function (e) {
        addClass(this, e, 'out');
    })


});
function getSpec(ele) {
    return {
        w: ele.offsetWidth,
        h: ele.offsetHeight
    }
}
function addClass(ele, e, state) {
    var x = e.offsetX - ele.sp.w / 2;
    var y = e.offsetY - ele.sp.h / 2;

    var d = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4;
    

    var ds;
    switch (d) {
        case 0:
            ds = 'top';
            break;
        case 1:
            ds = 'right';
            break;
        case 2:
            ds = 'bottom';
            break;
        case 3:
            ds = 'left';


    }
    ele.className = state + '-' + ds;
}